﻿.fl { float: left;}
.fr { float: right;}
a { text-decoration: none;}

/*================= Button ======================*/
.button-upload {
    border: 1px solid #CCC;
    border-radius: 2px;
    color: #111;
    cursor: pointer;
    padding: 5px 0 5px 10px;
    position: relative;
    text-align: center;
    width: 225px;
    background: #f4f4f4;
    background: url(…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,rgba(244,244,244,1) 0,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(247,247,247,1) 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(244,244,244,1)),color-stop(50%,rgba(243,243,243,1)),color-stop(51%,rgba(237,237,237,1)),color-stop(100%,rgba(247,247,247,1)));
    background: -webkit-linear-gradient(top,rgba(244,244,244,1) 0,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(247,247,247,1) 100%);
    background: -o-linear-gradient(top,rgba(244,244,244,1) 0,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(247,247,247,1) 100%);
    background: -ms-linear-gradient(top,rgba(244,244,244,1) 0,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(247,247,247,1) 100%);
    background: linear-gradient(to bottom,rgba(244,244,244,1) 0,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(247,247,247,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#f7f7f7', GradientType=0 );
}
.button-upload:hover { border: 1px solid #aaa;}

.button-green{
 border:1px solid #2c620b; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 5px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #439411; background-image: -webkit-gradient(linear, left top, left bottom, from(#439411), to(#008c00));
 background-image: -webkit-linear-gradient(top, #439411, #008c00);
 background-image: -moz-linear-gradient(top, #439411, #008c00);
 background-image: -ms-linear-gradient(top, #439411, #008c00);
 background-image: -o-linear-gradient(top, #439411, #008c00);
 background-image: linear-gradient(to bottom, #439411, #008c00);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#439411, endColorstr=#008c00);
}

.button-green:hover{
 border:1px solid #1a3906;
 background-color: #2e660c; background-image: -webkit-gradient(linear, left top, left bottom, from(#2e660c), to(#005900));
 background-image: -webkit-linear-gradient(top, #2e660c, #005900);
 background-image: -moz-linear-gradient(top, #2e660c, #005900);
 background-image: -ms-linear-gradient(top, #2e660c, #005900);
 background-image: -o-linear-gradient(top, #2e660c, #005900);
 background-image: linear-gradient(to bottom, #2e660c, #005900);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#2e660c, endColorstr=#005900);
}

.button-gray{
 border:1px solid #757575; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 5px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;cursor: pointer;
 background-color: #919191; background-image: -webkit-gradient(linear, left top, left bottom, from(#919191), to(#707070));
 background-image: -webkit-linear-gradient(top, #919191, #707070);
 background-image: -moz-linear-gradient(top, #919191, #707070);
 background-image: -ms-linear-gradient(top, #919191, #707070);
 background-image: -o-linear-gradient(top, #919191, #707070);
 background-image: linear-gradient(to bottom, #919191, #707070);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#919191, endColorstr=#707070);
}

.button-gray:hover{
 border:1px solid #5e5e5e;
 background-color: #787878; background-image: -webkit-gradient(linear, left top, left bottom, from(#787878), to(#575757));
 background-image: -webkit-linear-gradient(top, #787878, #575757);
 background-image: -moz-linear-gradient(top, #787878, #575757);
 background-image: -ms-linear-gradient(top, #787878, #575757);
 background-image: -o-linear-gradient(top, #787878, #575757);
 background-image: linear-gradient(to bottom, #787878, #575757);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#787878, endColorstr=#575757);
}

/*============ Form Upload ===============*/
.upload { width: 225px;position: relative;overflow: hidden;margin: 100px auto 5px auto;}
.note { font-family: verdana;font-size: 10px;color: #aaa;margin-top: 5px;width: 225px;text-align: center;margin: 0 auto;}
.upload-images {
    padding: 2px 0;
    color: #777;
    background-image: url('/icon/album-upload.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    cursor: pointer;
    font-size: 12px;
    text-shadow: 0 1px 1px #FFF;
    display: block;
    text-align: center;
    font-size: 12px;
    font-family: verdana;
}
.upload-title { padding-bottom: 5px;border-bottom: 1px solid #F8F3F3;margin-bottom: 10px;font-size: 18px;font-family: verdana;}
.upload-title strong {color: #2e8b57;}
.upload-container { border: 1px dashed #ccc;height: 280px;margin-bottom: 10px;padding: 10px;overflow-y: scroll;}
.upload-album { margin-bottom: 7px;}
.upload-album>input { border: 1px solid #ccc;padding: 5px 7px;border-radius: 4px;width: 70%; }
.upload-toolbar { background-color: #E5E5E5;padding: 10px 15px;margin-left: -15px;width: 800px;height: 28px;}
.upload-slide { width: 100%;padding-top: 10px;height: 30px;}
.upload-slide>a { display: block;float: left;margin-right: 5px;border-radius: 4px;overflow: hidden;height: 30px;}
.upload-slide>span>a { width: 70px;height: 30px;background-color: #eee;display: block;float: left;font-size: 11px;text-align: center;}

#filesSelect { width: 100%;overflow: hidden;}
#filesSelect img { float: left;margin-right: 10px;margin-bottom: 20px;}
#filesSelect .img-item { border: 1px solid #ccc;width: 180px;height: 180px;overflow: hidden;background-color: #f2f2f2;float: left;margin: 0 4px 10px;}
#filesSelect .img-item>span { display: block;height: 20px;padding: 3px;}
#filesSelect .img-item>span>b { display: block;float: right;width: 18px;height: 18px;background-color: #ddd;line-height: 17px;color: #888;text-align: center;font-size: 11px;cursor: pointer;font-family: arial;border-radius: 50%;}
#filesSelect .img-item>span>b:hover { background-color: #bd362f;color: #fff;}

#btnAttachImage { border: 1px solid #ccc;padding: 2px 8px;background-color: #fff;}
#btnAttachImage:hover { background-color: #eee;}

.progress {
    width: 200px;
    overflow: hidden;
    margin-left: 20px;
    height: 20px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    float: left;
    margin-top: 4px;
    border: 1px solid #ccc;
    display: none;
}
.progress-bar {
    width: 0;
    height: 20px;
    background: transparent url('/images/progress-bar.jpg') repeat-x left top;
}

.hide { display: none;}


